<template>

    <div class="teachercard">
        <div class="global">
            <div class="globalleft">
                <div class="left1">
                    <div class="avatar">
                        <img :src="user.icon" alt="">
                    </div>
                    <div class="username">
                        {{ user.username }}
                    </div>
                </div>
                <div class="left2" style="border-top: 2px solid #af9998;">
                    <div class="grxx" style="font-size: 30px;color: #af9998;margin-bottom: 20px;">个人信息</div>
                    <div class="textleft" >姓名: {{ user.username }}</div>
                    <div class="textleft" >学士: {{ user.scholar }}</div>
                    <div class="textleft" >Email: {{ user.email }}</div>
                    <div class="textleft" >地址： {{ user.address }}</div>
                    <div class="textleft">研究方向：{{ user.researchDirection }}</div>
                    <!-- <div class="textleft">招生方向：{{ user.enrollmentDirection }}</div> -->
                </div>
            </div>
            <div class="globalright">
                <div class="grxx" style="font-size: 30px;color: #af9998;margin-bottom: 20px;">个人简介</div>
                <div class="textleft" v-html="user.personalProfile"></div>
            </div>

        </div>
        <!-- <div class="username">
            {{ user.username }}
        </div>
        <div class="avatar">
            <img :src="user.icon" alt="">
        </div>
        <div class="textleft" style="font-weight: bold;">姓名:  {{user.username}}</div>
        <div class="textleft" style="font-weight: bold;">学士:  {{user.scholar}}</div>
        <div class="textleft" style="font-weight: bold;">Email:  {{user.email}}</div>
        <div class="textleft" style="font-weight: bold;">地址： {{user.address}}</div>
        <div class="textleft">研究方向：{{user.researchDirection}}</div>
       
        <div class="textleft" style="margin-top: 30px;">个人简介：</div>
        <div class="textleft" v-html="user.personalProfile"></div>
         -->
    </div>
</template>
<style scoped>
.textleft {
    text-align: left;

    font-size: 16px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.username {
    text-align: center;
    padding-bottom: 20px;
    box-sizing: border-box;

    font-size: 20px;

}

.avatar {
    width: 150px;
    height: 200px;
    margin: 0 auto 20px auto;

}

.avatar img {
    width: 100%;
    height: 100%;


}
</style>
<script>
import service from '@/request'

export default {
    data() {
        return {
            user: {}
        }
    },
    mounted() {
        this.getlist()
    },
    methods: {
        async getlist() {
            this.user = JSON.parse(window.localStorage.getItem("userinfo"))
            const ress = await service.get("/sys/user/" + this.$route.query.id);
            console.log(ress)
            this.user = ress.data
        }
    }
}
</script>
<style scoped>
.teachercard {
    width: 100%;
    height: 100%;
    background: url("../../assets/bjgr.jpg") no-repeat;
    background-size: 100% 120%;
/* overflow: auto; */

    box-sizing: border-box;
}

.global {
    width: 100%;
    height: auto;
    display: flex;
    margin: 0 auto;
    padding: 20px;
    
    justify-content: space-between;
    box-sizing: border-box;
}

.globalleft {
    width: 30%;
    height: auto;
}
.globalright{
    width: 69%;
    height: auto;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.left1 {
    width: 100%;
    height: auto;
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    background: #fff;

}
.left2{
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;

}
</style>